<template>
  <view>
    <view class="back" @click="goBack">
      <u-icon name="arrow-left" size="24" color="#fff"></u-icon>
    </view>
    <view class="sc">
      <u-icon name="star" size="24" color="#fff" v-if="!isSc"></u-icon>
      <u-icon name="star-fill" size="24" v-else c olor="#5CCBC1"></u-icon>
    </view>
    <u-swiper :list="info.beautifyCase.bannerUrl.split(',')" height="375"></u-swiper>
    <view class="box">
      {{ info.beautifyCase.describe }}
      <view class="xmBox">
        <view class="t">
          <view>操作项目</view>
          <view>项目花费</view>
        </view>
        <view class="b">
          <view class="l">{{ info?.serviceGood?.title }}</view>
          <view class="r">￥{{ info?.serviceGood?.price }}</view>
        </view>
      </view>
    </view>
    <view class="box" style="border-radius: 20rpx">
      <view>图文详情</view>
      <view class="des">
        <u-parse :content="info.beautifyCase.content"></u-parse>
      </view>
    </view>
  </view>
</template>
<script setup lang="ts">
import { beautifyselectInfo } from "@/api/home";
import { goBack } from "@/utils/commonFn";
import { onMounted, ref } from "vue";
const { id } = defineProps<{
  id: string;
}>();

const isSc = ref(false);
const info = ref();
const list2 = ["https://cdn.uviewui.com/uview/swiper/swiper1.png", "https://cdn.uviewui.com/uview/swiper/swiper2.png", "https://cdn.uviewui.com/uview/swiper/swiper3.png"];
onMounted(async () => {
  const res = await beautifyselectInfo({ id });
  info.value = res.data;
});
</script>
<style lang="less" scoped>
.sc {
  position: absolute;
  top: 102rpx;
  right: 32rpx;
  width: 60rpx;
  height: 60rpx;
  background: rgba(176, 176, 176, 0.5);
  z-index: 99;
  border-radius: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
}
.box {
  background: #fff;
  padding: 40rpx 32rpx;
  font-size: 28rpx;
  color: #333333;
  line-height: 42rpx;
  margin-bottom: 20rpx;
}
.xmBox {
  border-radius: 16rpx;
  border: 2rpx solid #f3f4f6;
  margin-top: 40rpx;
  .t {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 16rpx 32rpx;
    font-size: 24rpx;
    color: #8a8a8d;
    line-height: 32rpx;
    background: #f2fbfa;
  }
  .b {
    padding: 24rpx 32rpx;
    display: flex;
    justify-content: space-between;
    font-size: 28rpx;
    color: #5ccbc1;
    line-height: 42rpx;
    .l {
      width: 70%;
    }
    .r {
      width: 15%;
      text-align: center;
    }
  }
}
.des {
  white-space: pre-wrap;
  width: 100%;
  margin-top: 20rpx;
  img {
    width: 100%;
    height: 100%;
  }
}
</style>
